<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #view{
            width: 800px;
            height: 500px;
            margin: 50px auto;
            background-color: skyblue;
            padding: 20px;
            text-align: center;
        }
        div img{
            width: 100%;
            height: 90%;

        }

    </style>
    
    <script type="text/javascript">
        window.onload=function(){
         
         var prev = document.getElementById("prev");
         var next = document.getElementById("next");   

        var img = document.getElementsByTagName("img")[0];

         var imgArr = ["../images/1.jpeg","../images/2.jpeg","../images/3.jpeg","../images/4.jpeg","../images/5.jpg","../images/6.jpg","../images/7.jpeg"]
         var index = 0;
        //  var p_Arr = ["1","2","3","4","5","6","7"];
       
        // for(var j=0;j<p_Arr.length;j++){
        //     while(index!=j){
        //         info.innerHTML= p_Arr.slice[j,1]
            // }
        
            
        // }
         // var info = document.getElementById("info");
        // info.innerHTML = "我";
        
        
        prev.onclick = function(){
            img.src = imgArr[index];
            index--;
            if(index < 0){
                
                index = imgArr.length-1
            }
        };

        next.onclick = function(){
            img.src = imgArr[index];
            index++;
            if(index > imgArr.length-1)
            index = 0;
        };





        }

        

        




    </script>














</head>
<body>
    <div id="view">
        <p id="info"></p>
        <img src="../images/1.jpeg" alt="三人组"/>
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>
</html>